import React from 'react';
import { Button, Checkbox, Form, Input, message } from 'antd';
import { useDispatch } from 'react-redux'
import *as service from '../../api/user'
import { useNavigate } from 'react-router-dom'
import login from '../../utiles/img/login.png'
import './Login.scss'


interface Props {

}
function Login(props: Props) {


    //跳转路由的
    let Navigate = useNavigate()
    let dispatch = useDispatch()

    //验证通过是执行
    let onFinish = async (FinishValue: any) => {
        let res = await service.user_login(FinishValue)
        console.log(res);
       let ress= res.data.data.keys.split(',')
       console.log(ress);
       
        
        if (res.data.length == 0) {
            message.error({ content: '用户名或密码错误，登录失败！' })
        } else {
            localStorage.setItem('userinfo', JSON.stringify(res.data.data))
            message.success({ content: '登录成功！' })
            Navigate('/index')
        }
    }
    //验证失败时执行
    let onFinishFailed = (FinishFailedValue: any) => {
        console.log(FinishFailedValue)
    }
    //手机号校验
    let phone = (rule: any, value: string, callback: any) => {
        if (value != '') {
            callback();
        } else {
            callback(new Error('请输入正确的手机号!'))
        }
    }
    //密码校验
    let password = (rule: any, value: string, callback: any) => {
        if (/\d{4}/.test(value)) {
            callback();
        } else {
            callback(new Error('密码格式不正确'))
        }
    }
    return (
        <div className='login'>
            <img src={login} alt="" />
            <div className='user'>
                <Form
                    className='from'
                    style={{ maxWidth: 400 }}
                    onFinish={onFinish}
                    onFinishFailed={onFinishFailed}
                >
                    <Form.Item
                        label="用户名："
                        name="username"
                        rules={[{ required: true, validator: phone }]}
                    >
                        <Input className='input' />
                    </Form.Item>

                    <Form.Item
                        label="密码："
                        name="password"
                        rules={[{ required: true, validator: password }]}
                    >
                        <Input.Password />
                    </Form.Item>

                    <Form.Item name="remember" valuePropName="checked" wrapperCol={{ offset: 8, span: 16 }}>
                    </Form.Item>

                    <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
                        <Button type="primary" htmlType="submit">
                            登录
                        </Button>
                    </Form.Item>
                </Form>
            </div>
        </div>
    );
}

export default Login;